<template>
    <div class="commentable">
            <el-table :data="tableData" >
                <el-table-column
                show-overflow-tooltip
                 v-for="item in tableLable"
                :key="item.prop"
                :label="item.label"
                :width="item.width ? item.width : 100"
                :prop="item.prop"
                >
                <template slot-scope="scope">
                    <span style="margin-left:10px">{{scope.row[item.prop]}}</span>
                </template>
                </el-table-column>
                <el-table-column label="操作" mini-width="180">
                    <el-button size="mini" @click="handlerEdit">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handlerDelete">删除</el-button>
                </el-table-column>
            </el-table>

            <el-pagination
            class="pager"
            layout="prev,pager,next"
            :total="config.total"
            :current-page="config.page"
            @currentChange="changePage"
            :page-size="20" 
            >

            </el-pagination>
    </div>
</template>

<script>
export default {
    name:'commentable',
    props:{
        tableData:Array,
        tableLable:Array,
        config:Object

    },
    data(){
        return{

        }
    },
    methods:{
        handlerEdit(row){
            this.$emit('edit',row)
        },
        handlerDelete(row){
            this.$emit('del',row)
        },
        changePage(page){
            this.$emit('changePage',page)
        }
    }   
}
</script>

<style lang="less" scoped>
    .commentable{
        height: calc(100% -62px);
        background-color: white;
        position: relative;
        .pager{
            position: absolute;
            bottom: 0;
            right: 25px;
        }
    }

</style>